<template>
  <div class="app-main-container tabpdding">
    <el-tabs v-model="tabActiveName" @tab-click="handleClick">
      <el-tab-pane :label="translate('jjrpz')" name="first">
        <div class="doumee-table-buttons">
          <el-button
            v-if="meta.indexOf('OptionDefaultAdd') > -1"
            type="primary"
            @click="toHolidayConfigAdd"
          >{{ translate("add") }}</el-button>
          <el-switch
            v-model="couponsInfo.value"
            class="ml10"
            style="zoom: 1.5"
            active-value="1"
            inactive-value="0"
            @change="toConfigUpdate($event, couponsInfo.id, 'value')"
          />
          <span class="placeholder9 ml10">{{ translate("openTbsstb") }}</span>
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="holidayConfigList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="translate('jjrlb')"
            prop="name"
          />
          <el-table-column align="center" :label="translate('openFlag')">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isOpen"
                :active-value="'1'"
                :inactive-value="'0'"
                :disabled="meta.indexOf('OptionDefaultEdit') == -1"
                @change="toConfigUpdate($event, scope.row.id, 'isOpen')"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" :label="translate('enableFlag')">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isAllow"
                :active-value="'1'"
                :inactive-value="'0'"
                :disabled="meta.indexOf('OptionDefaultEdit') == -1"
                @change="toConfigUpdate($event, scope.row.id, 'isAllow')"
              />
            </template>
          </el-table-column>
          <el-table-column :label="translate('handle')" align="center">
            <template slot-scope="scope">
              <div v-if="meta.indexOf('OptionDefaultDel') > -1" class="flex-cc">
                <el-button
                  type="text"
                  style="color: red"
                  @click="toHolidayConfigDelete(scope.row.id)"
                >{{ translate("del") }}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="flex-cc doumee-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            hide-on-single-page
            :current-page.sync="pagination.page"
            @current-change="currentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane
        v-if="meta.indexOf('VenueConfigList') > -1"
        :label="translate('payConfig')"
        name="second"
      >
        <el-tabs
          v-model="tabName"
          tab-position="left"
          @tab-click="handleClickb"
        >
          <el-tab-pane :label="translate('shopsConfig')" name="first">
            <div class="warnningTip" @click="handleMini">
              {{ translate("shopPayCon") }}
            </div>
            <el-table
              v-loading="listLoading"
              :data="payConfigList"
              element-loading-text="Loading"
              border
              fit
              :header-row-class-name="'table-header'"
              class="doumee-element-table"
            >
              <el-table-column
                align="center"
                :label="translate('payMethod')"
                prop="name"
              />
              <el-table-column align="center" :label="translate('enableFlag')">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.isAllow"
                    :active-value="'1'"
                    :inactive-value="'0'"
                    :disabled="meta.indexOf('OptionDefaultEdit') == -1"
                    @change="toConfigUpdate($event, scope.row.id, 'isAllow')"
                  />
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                :label="translate('payDesc')"
                prop="channel"
                show-overflow-tooltip
              />
              <el-table-column :label="translate('handle')" align="center">
                <template slot-scope="scope">
                  <div class="flex-cc">
                    <el-button
                      v-if="
                        scope.row.isAllow == '1' &&
                          (scope.row.value == '01' ||
                            scope.row.value == '03' ||
                            scope.row.value == '04' ||
                            scope.row.value == '08' ||
                            scope.row.value == '02' ||
                            scope.row.value == '06' ||
                            scope.row.value == '07')
                      "
                      type="primary"
                      @click="editShow(scope.row)"
                    >{{ translate("config") }}</el-button>
                    <!-- <span
                      v-if="
                        scope.row.isAllow == '0' &&
                          scope.row.value != '03' &&
                          scope.row.value != '04' &&
                          scope.row.value != '08'
                      "
                    >-</span> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <div class="flex-cc doumee-pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                hide-on-single-page
                :current-page.sync="pagination.page"
                @current-change="currentChange"
              />
            </div>
          </el-tab-pane>
          <template v-if="meta.indexOf('VenueConfigDetailList') > -1">
            <el-tab-pane
              v-for="item in venueList"
              :key="item.id"
              :label="item.name"
              :name="item.id"
            >
              <div class="warnningTip" @click="handleMini">
                {{ translate("dcgywxysks") }}
              </div>
              <el-table
                v-loading="listLoading"
                :data="venuePayConfigList"
                element-loading-text="Loading"
                border
                fit
                :header-row-class-name="'table-header'"
                class="doumee-element-table"
              >
                <el-table-column
                  align="center"
                  :label="translate('payConfig')"
                  prop="name"
                />
                <el-table-column
                  align="center"
                  :label="translate('payDesc')"
                  prop="channel"
                />
                <el-table-column :label="translate('handle')" align="center">
                  <template slot-scope="scope">
                    <div class="flex-cc">
                      <el-button
                        v-if="meta.indexOf('UpdateVenueConfigDetailList') > -1"
                        type="primary"
                        @click="editShowb(scope.row)"
                      >{{ translate("config") }}</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane></template>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane :label="translate('venueDeviceConfig')" name="third">
        <div class="device-list">
          <div
            v-if="meta.indexOf('OptionDefaultEdit') > -1"
            class="device-item"
          >
            <transition name="fade">
              <Cropper
                v-if="dialogCropperVisible"
                :option-img="optionImg"
                :fileinfo="fileinfo"
                use-type="VENUE_IMG"
                :fixed-number="[32, 32]"
                @formSubmit="cropperSubmit"
                @formClose="cropperClose"
              />
            </transition>
            <el-upload
              class="device-uploader"
              :action="uploadFileUrl"
              :data="uploadData"
              :show-file-list="false"
              :auto-upload="false"
              accept=".jpg,.png"
              :on-change="addFileChange"
            >
              <i class="el-icon-plus uploader-icon" />
              <div
                v-show="deviceConfigAdd.image"
                class="file"
                :style="'background-image: url(' + deviceConfigAdd.image + ')'"
              >
                <div class="delete">
                  <i
                    class="el-icon-delete icon"
                    @click.stop="deleteDeviceConfigAddImage"
                  />
                </div>
              </div>
            </el-upload>
            <div class="name">
              <el-input
                v-model="deviceConfigAdd.configName"
                type="text"
                :placeholder="translate('qsr')"
                class="name"
              />
              <el-button
                v-preventReClick
                size="small"
                type="primary"
                class="save-button"
                @click="toVenueConfigAdd"
              >{{ translate("save") }}</el-button>
            </div>
          </div>
          <div
            v-for="(item, index) in deviceConfigList"
            :key="index"
            class="device-item"
          >
            <div
              class="image"
              :style="'background-image: url(' + item.value + ')'"
            />
            <div class="name">
              <div class="value">{{ item.name }}</div>
              <el-button
                v-if="meta.indexOf('OptionDefaultDel') > -1"
                size="small"
                type="danger"
                class="save-button"
                @click="toVenueConfigDelete(item.id)"
              >{{ translate("del") }}</el-button>
            </div>
          </div>
          <!-- flex 布局 占位 -->
          <div class="holder" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="translate('htUserDefaultPsd')" name="fourth">
        <el-form
          v-if="tabActiveName == 'fourth'"
          label-width="auto"
          :inline="false"
          size="normal"
          class="default-password-form"
        >
          <el-form-item
            v-for="item in defaultPasswordConfig"
            :key="item.id"
            :label="translate('defaultPsd')"
          >
            <el-input
              v-model="item.value"
              type="text"
              :placeholder="translate('psdDesc')"
              class="name"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              v-if="meta.indexOf('OptionDefaultEdit') > -1"
              v-preventReClick
              size="small"
              type="primary"
              class="save-button"
              @click="toUpdateDefaultPassword(4)"
            >{{ translate("save") }}</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="translate('kfdh')" name="six">
        <el-form
          v-if="tabActiveName == 'six'"
          label-width="auto"
          :inline="false"
          size="normal"
          class="default-password-form"
        >
          <el-form-item
            v-for="item in defaultPasswordConfig"
            :key="item.id"
            :label="translate('kfdh')"
          >
            <el-input
              v-model="item.value"
              type="text"
              :placeholder="translate('qsr')"
              class="name"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              v-if="meta.indexOf('OptionDefaultEdit') > -1"
              v-preventReClick
              size="small"
              type="primary"
              class="save-button"
              @click="toUpdateDefaultPassword(11)"
            >{{ translate("save") }}</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="translate('commoneConsume')" name="fifth">
        <div class="doumee-table-buttons">
          <el-button
            v-if="meta.indexOf('OptionDefaultAdd') > -1"
            type="primary"
            @click="toGeneralConsumptionAdd"
          >{{ translate("add") }}</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="generalConsumptionConfigList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            :label="translate('mingcheng')"
            prop="name"
          />
          <el-table-column :label="translate('handle')" align="center">
            <template slot-scope="scope">
              <div v-if="meta.indexOf('OptionDefaultDel') > -1" class="flex-cc">
                <el-button
                  type="text"
                  style="color: red"
                  @click="toGeneralConsumptionDelete(scope.row.id)"
                >{{ translate("del") }}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="flex-cc doumee-pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            hide-on-single-page
            :current-page.sync="pagination.page"
            @current-change="currentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="translate('xieyiConfig')" name="seven">
        <!-- code,AGREEMENT_ALBUM_SECRET（运动抓拍隐私协议）和AGREEMENT_ALBUM_SERVICE（运动抓拍服务协议） -->
        <el-tabs v-if="tabActiveName == 'seven'" v-model="sportActiveName">
          <el-tab-pane
            v-for="(item, index) in agreementList"
            :key="item.id"
            :label="item.name"
          >
            <el-form
              :ref="'ruleForm' + index"
              class="doumee-form"
              :model="agreementContent"
              :rules="rules"
              :label-width="translate('xieyiContent').length + 3 + 'em'"
              label-suffix="："
            >
              <el-form-item :label="translate('xieyiContent')" prop="value">
                <!-- <WangEditor
                  :ref="'xieyiContent' + 'sportActiveName'"
                  :value="item.value"
                  @input="(e) => (item.value = e)"
                /> -->
                <quill-editor
                  ref="myTextEditor"
                  v-model="item.value"
                  :placeholder="$t('message.qsrnr')"
                  class="myQuillEditor"
                  :options="quillOption"
                />
              </el-form-item>
              <div class="line-style" />
              <el-form-item>
                <el-button
                  v-preventReClick
                  type="primary"
                  @click="onSubmit(item)"
                >{{ translate("tj") }}</el-button>
              </el-form-item></el-form>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增节假日配置 -->
    <el-dialog
      :close-on-click-modal="modalDialog"
      :lose-on-press-escape="modalDialog"
      :title="translate('xzjjrpz')"
      :visible.sync="showHolidayConfigAdd"
    >
      <el-form
        ref="refForm"
        :rules="rules"
        :model="formHolidayConfigAdd"
        label-width="auto"
      >
        <!-- <el-form-item label="节假日名称">
          <el-input v-model="formHolidayConfigAdd.name" autocomplete="off" />
        </el-form-item> -->
        <el-form-item :label="translate('selTime')" prop="date">
          <el-date-picker
            v-model="formHolidayConfigAdd.date"
            type="daterange"
            :range-separator="translate('to')"
            :start-placeholder="translate('ksrq')"
            :end-placeholder="translate('jsrq')"
          />
        </el-form-item>
        <el-form-item :label="translate('enableFlag')">
          <el-switch
            v-model="formHolidayConfigAdd.isAllow"
            :active-value="'1'"
            :inactive-value="'0'"
          />
        </el-form-item>
        <el-form-item :label="translate('openFlag')">
          <el-switch
            v-model="formHolidayConfigAdd.isOpen"
            :active-value="'1'"
            :inactive-value="'0'"
          />
          <span style="margin-left: 10px; color: #8d8c8c; font-size: 12px">{{
            translate("jjrbkf")
          }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showHolidayConfigAdd = false">{{
          translate("cancel")
        }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          :loading="holidayLoading"
          @click="confirmHolidayConfigAdd"
        >{{ translate("enter") }}</el-button>
      </div>
    </el-dialog>
    <!-- 新增通用消费配置 -->
    <el-dialog
      :close-on-click-modal="modalDialog"
      :lose-on-press-escape="modalDialog"
      :title="translate('commonConsumeTypeAdd')"
      :visible.sync="showGeneralConsumptionAdd"
    >
      <el-form :model="generalConsumptionAdd" label-width="auto">
        <el-form-item :label="translate('commoneConsumeName')">
          <el-input
            v-model="generalConsumptionAdd.name"
            type="text"
            :placeholder="translate('qsr')"
            class="name"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showGeneralConsumptionAdd = false">{{
          translate("cancel")
        }}</el-button>
        <el-button
          v-preventReClick
          :loading="commonConsumeLoading"
          type="primary"
          @click="confirmGeneralConsumptionAdd"
        >{{ translate("enter") }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="showPayEdit"
      :close-on-click-modal="modalDialog"
      :lose-on-press-escape="modalDialog"
      :title="payConfigTitle"
      :visible.sync="showPayEdit"
      width="800px"
    >
      <el-form ref="ruleForm" label-suffix="：" label-width="auto">
        <el-form-item
          v-for="(item, index) in payParam"
          :key="index"
          :label="item.name"
        >
          <el-switch
            v-if="item.code == 'MEMBER_CARD_PAY'"
            v-model="item.value"
            active-value="1"
            inactive-value="0"
          />
          <el-input v-else v-model="item.value" />
        </el-form-item>
        <template v-if="payParam.length === 0 && zfpzInfo.code">
          <el-form-item :label="translate('payName')">
            <el-input v-model="zfpzInfo.name" />
          </el-form-item>
          <el-form-item :label="translate('payDesc')">
            <el-input v-model="zfpzInfo.channel" />
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showPayEdit = false">{{
          translate("cancel")
        }}</el-button>
        <el-button
          v-preventReClick
          :loading="payConfigLoading"
          type="primary"
          @click="formOnSubmit('ruleForm')"
        >{{ translate("enter") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  configList,
  configUpdate,
  configAdd,
  configDelete,
  uploadFile,
  venueList,
  configDetails,
  configUpdateForPayParams,
  updateVenueConfigDetailList,
  venueConfigDetailList,
  venueConfigList
} from '@/api'
import { dateFormat } from '@/utils/validate'
// // import WangEditor from '@/components/quillOption'
import { quillEditor } from 'vue-quill-editor'
import quillConfig from '@/api/sc.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Cropper from '@/components/cropper'
export default {
  name: 'OptionDefault',
  components: {
    // WangEditor,
    quillEditor,
    Cropper
  },
  data() {
    return {
      payPassword: {
        payPasswordFlag: false
      },
      quillOption: quillConfig,
      couponsInfo: {
        value: '1'
      },
      venuePayConfigList: [],
      modalDialog: this.$store.state.app.dialog,
      holidayLoading: false,
      payConfigLoading: false,
      labelWidth: '',
      commonConsumeLoading: false,
      optionImg: '',
      fileinfo: {},
      dialogCropperVisible: false,
      meta: [],
      uploadFileUrl: uploadFile,
      uploadData: {
        folder: 'VENUE_IMG',
        type: ''
      },
      uploadParam: {},
      holidayConfigList: [],
      payConfigList: [],
      deviceConfigList: [],
      defaultPasswordConfig: [],
      total: 0,
      listLoading: true,
      tabActiveName: 'first',
      tabName: 'first',
      configType: 1,
      configName: 'holidayConfigList',
      configCode: '',
      agreementContent: {},
      agreementList: [],
      showPayEdit: false,
      payVen: false,
      payConfigTitle: this.translate('payConfig'),
      payEditType: 0,
      payParam: [],
      zfpzInfo: {},
      showHolidayConfigAdd: false,
      formHolidayConfigAdd: {
        name: '',
        date: '',
        isOpen: '1',
        isAllow: '1',
        type: '1'
      },
      generalConsumptionConfigList: [],
      showGeneralConsumptionAdd: false,
      generalConsumptionAdd: {
        name: '',
        type: '72'
      },
      deviceConfigAdd: {
        configName: '',
        configPicture: ''
      },
      pagination: {
        firstQueryTime: new Date(),
        page: 1,
        rows: 10
      },
      venueList: [],
      quillOption: quillConfig,
      sportActiveName: 0,
      param: {},
      rules: {
        date: [{ required: true, message: this.translate('qxzsj'), trigger: 'blur' }],
        value: [{ required: true, message: this.translate('contentPlace'), trigger: 'blur' }]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getZd()
    this.getConfigList()
    this.getVenue()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    fwbChange(type, e) {
      console.log(6, type, e)
    },
    getVenue() {
      this.tabName = 'first'
      venueList({ param: {}}).then(res => {
        this.venueList = res.recordList || []
      })
      venueConfigList({ param: { type: '2' }}).then((res) => {
        if (res.errorCode !== '000000') return
        this.venuePayConfigList = res.recordList || []
      })
    },
    formOnSubmit() {
      const paramList = [...this.payParam]
      if (paramList && paramList.length > 0) {
        let obj = {}
        paramList.forEach((config) => {
          if (!config.value && !obj.name) {
            obj = config
          }
        })
        if (obj.name) {
          this.$message.warning(this.translate('qsr') + obj.name)
          return false
        }
        this.payConfigLoading = true
        if (this.payVen) {
          updateVenueConfigDetailList({
            param: {
              dataList: paramList,
              venueId: this.tabName
            }
          }).then((res) => {
            this.payConfigLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.translate('configScs'))
              this.showPayEdit = false
            }
          })
        } else {
          configUpdateForPayParams({
            param: {
              paramList
            }
          }).then((res) => {
            this.payConfigLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.translate('configScs'))
              this.showPayEdit = false
            }
          })
        }
      } else {
        const param = { ...this.zfpzInfo }
        if (!param.name) {
          this.$message.warning(this.translate('qsrzfmc'))
          return
        }
        if (!param.channel) {
          this.$message.warning(this.translate('qsrzfsm'))
          return
        }
        configUpdate({ param }).then((res) => {
          if (res.errorCode !== '000000') return
          this.$message.success(this.translate('editScs'))
          this.showPayEdit = false
          this.getAgreement()
        })
      }
    },
    editShow(row) {
      this.payEditType =
        row.value === '04'
          ? 2
          : row.value === '08'
            ? 3
            : row.value === '01'
              ? 4
              : row.value === '03'
                ? 1
                : row.value
      this.payConfigTitle = row.name + this.translate('config')
      this.payVen = false
      if (row.value === '02' || row.value === '06' || row.value === '07') {
        this.showPayEdit = true
        this.payParam = []
        this.zfpzInfo = { ...row }
        this.labelWidth = '6em'
      } else {
        this.getPayInfo(this.payEditType)
      }
    },
    editShowb(row) {
      this.payEditType =
        row.value === '03'
          ? 1
          : row.value === '04'
            ? 2
            : ''
      this.getPayInfob(this.payEditType)
      this.payConfigTitle = row.name + this.translate('config')
      this.payVen = true
    },
    getPayInfob(payType, falg = true) {
      venueConfigDetailList({
        param: { type: '8', payType, venueId: this.tabName }
      }).then((res) => {
        if (res.errorCode !== '000000') return
        this.showPayEdit = falg
        this.payParam = res.recordList
      })
    },
    getPayInfo(payType, falg = true) {
      configDetails({
        param: { type: '8', payType }
      }).then((res) => {
        if (res.errorCode !== '000000') return
        this.showPayEdit = falg
        this.payParam = res.recordList
        const arr = res.recordList
        let labelWidth = 2
        arr.forEach(s => {
          if (s.name.length > labelWidth) {
            labelWidth = s.name.length
          }
        })
        this.labelWidth = labelWidth + 2 + 'em'
      })
    },
    fineSuccess() {

    },
    currentChange(page) {
      this.$set(this.pagination, 'page', page)
      this.getConfigList()
    },
    // 获取配置列表
    getZd() {
      // debugger
      configList({
        param: { type: '21', code: '' }
      }).then((res) => {
        if (res.recordList.length > 0) {
          this.couponsInfo = res.recordList[0]
        }
      })
    },
    getConfigList() {
      const { configType: type, configName: name, configCode: code } = this
      // debugger
      configList({
        pagination: this.pagination,
        param: { type, code }
      }).then((res) => {
        this.listLoading = false
        this[name] = res.recordList
        this.total = res.totalCount
        if (res.recordList.length) {
          this.agreementList = res.recordList
          this.agreementContent = res.recordList[0]
        }
        console.log(name, this[name])
      })
    },
    getAgreement() {
      const { configType: type, configName: name, configCode: code } = this
      configList({ pagination: this.pagination, param: { type, code }}).then(
        (res) => {
          this.listLoading = false
          this[name] = res.recordList
          this.total = res.totalCount
          if (res.recordList.length) {
            const item = res.recordList[0]
            if (item.code === code) {
              this.agreementContent = item
            }
          }
          // console.log(count)
        }
      )
    },
    handleMini() {
      this.$router.push('/application/miniFinish')
    },
    // 删除获取配置列表
    getdelConfigList() {
      const { configType: type, configName: name } = this
      configList({ pagination: this.pagination, param: { type }}).then(
        (res) => {
          this.listLoading = false
          this[name] = res.recordList
          this.total = res.totalCount
        }
      )
    },
    // 修改节假日配置、支付配置
    toConfigUpdate(e, id, paramName) {
      const { configType: type } = this
      configUpdate({ param: { id, type: paramName === 'value' ? '21' : type, [paramName]: e }}).then((res) => {
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('editScs'))
      })
    },
    // 新增节假日配置
    toHolidayConfigAdd() {
      this.showHolidayConfigAdd = true
    },
    // 确认新增节假日配置
    confirmHolidayConfigAdd() {
      const that = this
      const { formHolidayConfigAdd: param } = this
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          param.startDate = dateFormat(this.formHolidayConfigAdd.date[0])
          param.endDate = dateFormat(this.formHolidayConfigAdd.date[1])
          that.holidayLoading = true
          configAdd({ param }).then((res) => {
            that.holidayLoading = false
            if (res.errorCode === '000000') {
              that.$message.success(this.translate('addcg'))
              that.showHolidayConfigAdd = false
              that.getConfigList()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 删除节假日配置
    toHolidayConfigDelete(id) {
      this.$confirm(this.translate('xiangDelPlace'), this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          configDelete({ param: { id }}).then((res) => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('delScs'))
            this.pagination.page = 1
            this.getdelConfigList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.translate('canceledDel')
          })
        })
    },
    // 场馆设施上传图片成功
    uploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.deviceConfigAdd, 'image', res.showUrl)
        this.$set(this.deviceConfigAdd, 'configPicture', res.insertUrl)
      } else {
        this.$message.error(res.msg || this.translate('scsb'))
      }
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.deviceConfigAdd, 'image', config.showUrl)
        this.$set(this.deviceConfigAdd, 'configPicture', config.insertUrl)
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || this.translate('scsb'))
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    async addFileChange(file, fileList) {
      // 上传，拿到file文件
      // this.files = file.raw;
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 删除场馆设施已上传图片
    deleteDeviceConfigAddImage() {
      this.$set(this.deviceConfigAdd, 'image', '')
      this.$set(this.deviceConfigAdd, 'configPicture', '')
    },
    // 新增场馆设施配置
    toVenueConfigAdd() {
      const { deviceConfigAdd } = this
      if (!deviceConfigAdd.configName) {
        this.$message.info(this.translate('qsrmc3'))
        return false
      }
      if (!deviceConfigAdd.configPicture) {
        this.$message.info(this.translate('qsctp'))
        return false
      }
      const param = {
        name: deviceConfigAdd.configName,
        value: deviceConfigAdd.configPicture,
        type: '3'
      }
      configAdd({ param }).then((res) => {
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('addcg'))
        this.getConfigList()
        this.deviceConfigAdd = {
          configName: '',
          configPicture: ''
        }
      })
    },
    // 删除场馆设施配置
    toVenueConfigDelete(id) {
      this.$confirm(this.translate('configDelPlace'), this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          configDelete({ param: { id }}).then((res) => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('delScs'))
            this.getConfigList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.translate('canceledDel')
          })
        })
    },
    // 修改默认密码
    toUpdateDefaultPassword(e) {
      const param = {
        id: this.defaultPasswordConfig[0].id,
        value: this.defaultPasswordConfig[0].value,
        type: e
      }
      let str = this.translate('editPsdPlace')
      if (e === 11) {
        str = this.translate('editKefuPhoneP')
      }
      if (e === 4) {
        if (!this.defaultPasswordConfig[0].value) {
          this.$message.info(this.translate('initPsdPlace'))
          return false
        }
        if (
          this.defaultPasswordConfig[0].value.length < 8 ||
          this.defaultPasswordConfig[0].value.length > 20
        ) {
          this.$message.info(this.translate('psdLengthP'))
          return false
        }
        var reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,20}$/
        if (!reg.test(this.defaultPasswordConfig[0].value)) {
          this.$message.info(
            this.translate('psdRule1')
          )
          return false
        }
      }
      this.$confirm(str, this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          configUpdate({ param }).then((res) => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('editScs'))
            this.getConfigList()
          })
        })
        .catch(() => {
          console.log(this.translate('cancelEditEd'))
        })
    },
    // 添加通用消费配置操作
    toGeneralConsumptionAdd() {
      this.showGeneralConsumptionAdd = true
    },
    // 新增通用消费配置
    confirmGeneralConsumptionAdd() {
      const { generalConsumptionAdd: param } = this

      if (!param.name) {
        return this.$message.error(this.translate('qsrtyxflx'))
      }
      this.commonConsumeLoading = true
      configAdd({ param }).then((res) => {
        this.commonConsumeLoading = false
        this.generalConsumptionAdd.name = ''
        this.showGeneralConsumptionAdd = false
        if (res.errorCode !== '000000') return
        this.getConfigList()
      })
    },
    // 删除通用消费配置
    toGeneralConsumptionDelete(id) {
      this.$confirm(this.translate('xfpzDelPlace'), this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          configDelete({ param: { id }}).then((res) => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('delScs'))
            this.getConfigList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.translate('canceledDel')
          })
        })
    },
    handleClickb(tab) {
      this.tabName = tab.name
    },

    // 切换tab
    handleClick(tab) {
      this.configCode = ''
      switch (tab.name) {
        case 'first':
          this.configType = 1
          this.configName = 'holidayConfigList'
          break

        case 'second':
          this.configType = 2
          this.configName = 'payConfigList'
          this.getVenue()
          break

        case 'third':
          this.configType = 3
          this.configName = 'deviceConfigList'
          break

        case 'fourth':
          this.configType = 4
          this.configName = 'defaultPasswordConfig'
          break
        case 'six':
          this.configType = 11
          this.configName = 'defaultPasswordConfig'
          break
        case 'fifth':
          this.configType = 72
          this.configName = 'generalConsumptionConfigList'
          break
        case 'seven':
          this.configType = 15
          this.configCode = ''
          break
        default:
          this.$message.error(this.translate('getConfigErr'))
          break
      }
      // debugger
      this.pagination = {
        firstQueryTime: new Date(),
        page: 1,
        rows: 10
      }
      this.page = 1
      this.getConfigList()
    },

    onSubmit(item) {
      console.log(item)
      if (!item.value) return this.$message.warning(this.translate('qxsrnr'))
      const param = {
        code: item.code,
        value: item.value,
        type: item.type,
        id: item.id
      }
      configUpdate({ param }).then((res) => {
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('tjScs'))
        this.getConfigList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.device-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &::after {
    content: "";
    width: calc((100% - 90px) / 4);
  }

  .holder {
    width: calc((100% - 90px) / 4);
  }

  .device-item {
    padding: 20px;
    background-color: #f7f7f7;
    margin-bottom: 20px;
    display: flex;
    box-sizing: border-box;
    width: calc((100% - 90px) / 4);

    .device-uploader {
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      cursor: pointer;
      border: 1px dashed #ccc;
      border-radius: 8px;
      transition: all 0.3s;
      &:hover {
        border-color: $menuActive;
        .uploader-icon {
          color: $menuActive;
        }
      }
      ::v-deep .el-upload {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .file {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          .delete {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
            align-items: center;
            justify-content: center;
            .icon {
              color: #fff;
            }
          }
          &:hover {
            .delete {
              display: flex;
            }
          }
        }
      }
      .uploader-icon {
        color: #aaaaaa;
        font-size: 22px;
        transition: all 0.3s;
      }
    }

    .name {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      padding-left: 10px;
      box-sizing: border-box;
      .value {
        align-self: flex-start;
        font-weight: bold;
        font-size: 15px;
      }
    }
    .image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
}
.placeholder9 {
  line-height: 20px;
}
.default-password-form {
  width: 300px;
}
::v-deep .ql-container {
  height: 500px;
}
</style>
